<template>
	<view class="app-container">
		<z-paging ref="paging" v-model="goodsList" @query="getGoodsList">
		
			<template #top>
				<view style="background-color: var(--tn-color-primary);">
					<tn-navbar home-icon="" bg-color="tn-type-primary_bg" text-color="tn-white">调拨管理</tn-navbar>
				</view>
				<!-- 货主选择 -->
				<view class="header-section">
					<view class="owner-section tn-m-sm">
						<picker @change="handleOwnerChange" :value="selectedIndex" :range="orgList" range-key="orgname">
							<view class="owner-picker tn-p-sm">
								<text class="owner-name">{{ selectedIndex !== -1 ? orgList[selectedIndex]?.orgname : '请选择下级' }}</text>
								<text class="tn-icon-down"></text>
							</view>
						</picker>
					</view>
					
					<!-- 搜索框 -->
					<view class="search-section tn-pl-sm tn-pr-sm  tn-mb-sm" v-if="selectedIndex > -1">
						<tn-search-box
							v-model="searchKeyword"
							placeholder="搜索商品名称或编码"
							:show-action="false"
							:clearable="true"
							@search="handleSearch"
							@clear="handleClear"
							class="custom-search"
							size="sm"
						></tn-search-box>
					</view>
				</view>
			</template>
			
			<!-- 商品列表 -->
			<view class="product-list-section tn-mt-sm" v-if="selectedIndex > -1">
				<view class="product-row" v-for="item in goodsList" :key="item.goodsid">
					<view class="row-main">
						<view class="product-info">
							<text class="name">{{item.goodsname}}</text>
							<view class="info-row">
								<text class="code">编码：{{item.goodscode}}</text>
								<text class="stock">库存：{{item.stock || 0}}</text>
							</view>
							<view class="details">
								<text class="spec" v-if="item.goodsspec">规格：{{item.goodsspec}}</text>
								<text class="manu" v-if="item.manufacturer">厂家：{{item.manufacturer}}</text>
							</view>
							<view class="batch-info">
								<text class="batch">{{item.batchinfo}}</text>
								<text class="price-info">{{item.priceinfo}}</text>
							</view>
						</view>
					</view>
					<view class="row-action">
						<view class="input-group">
							<view class="input-item">
								<text class="input-label">调拨价</text>
								<tn-input 
									v-model="item.taxprice" 
									placeholder="调拨价" 
									class="custom-input price-input" 
									size="sm"
								/>
							</view>
							<view class="input-item">
								<text class="input-label">数量</text>
								<tn-input 
									v-model="item.num" 
									placeholder="数量" 
									class="custom-input qty-input" 
									size="sm"
								/>
							</view>
						</view>
						<tn-button 
							type="primary" 
							size="sm" 
							class="save-btn"
							@click="handleSingleSave(item)"
						>保存</tn-button>
					</view>
				</view>
			</view>
		</z-paging>
	</view>	
</template>

<script setup>
import { ref, computed, reactive,onMounted } from 'vue'
import { postCall  } from '@/api/index.js'
import { createParams } from '@/utils/utils.js'
import Big from 'big.js'
import { toastMessage } from '@/utils/toast.js'
const procName = "PROC_APP_DO_ALLOCATE";



const beforeBack = () => {
	  return new Promise((resolve) => {
	    setTimeout(() => {
	      uni.redirectTo({
	      	url: '/pages/index/index'
	      });
		  return true;
	    }, 1000)
	  })
	}

onMounted(()=>{
	getNextOrgList();
})
	
// 货主列表
const orgList = ref([])
const selectedIndex = ref(-1)


const getNextOrgList = async () =>{
	let params = {};
	params["P_PROC_NAME"] = procName;
	params["P_ACTION"] = "GETNEXTORG";
	await postCall(params).then(res=>{
		if(res){
			if(res.code===200){
				orgList.value = res.data.DATASET;
				console.log(orgList.value);
			}
		}
	})
}

// 搜索相关
const searchKeyword = ref('')
const originalProductList = ref([])

// 弹窗相关
const showPopup = ref(false)
const currentProduct = ref({})
const settlementPrice = ref('')

// 处理货主选择
const handleOwnerChange = (e) => {

	selectedIndex.value = e.detail.value;
	getGoodsList();
	// orgid.value = orgList.value[selectedIndex.value].orgid;
	// 模拟加载该货主的商品列表
	// loadProducts(orgList.value[ownerIndex.value].id)
}
const paging = ref(null)
const goodsList = ref([]);

// 加载商品列表
const getGoodsList = async (pageNo, pageSize) => {
	console.log("==:",pageNo,pageSize)
	let params = {};
	params["P_PROC_NAME"] = procName;
	params["P_ACTION"] = "GOODS";
	params["P_NEXTORGID"] = orgList.value[selectedIndex.value]?.orgid ?? '';
	params["P_PAGE"] = pageNo ?? 1;
	params["P_PAGESIZE"] = pageSize ?? 10;
	params["P_CON"] = searchKeyword.value;
	await postCall(params).then(res=>{
		if(res){
			paging.value.complete(res.data.DATASET);
		}
	}).catch(res =>{
		paging.value.complete(false);
	})
}

// 处理搜索
const handleSearch = () => {
	// 搜索逻辑已通过计算属性实现
	paging.value.reload();
}

// 处理清除搜索
const handleClear = () => {
	searchKeyword.value = '';
	paging.value.reload();
}




const transferList = ref([])

function handleSingleSave(item) {
	let params = {};
	params["P_PROC_NAME"] = procName;
	params["P_ACTION"] = "SAVE";
	params["P_NEXTORGID"] = orgList.value[selectedIndex.value]?.orgid ?? '';
	postCall(Object.assign(params,createParams(item))).then(res=>{
		if(res){
			if(res.code===200){
				toastMessage("调拨成功！");
				// 延迟刷新列表，确保提示信息能够显示
				setTimeout(() => {
					paging.value.reload();
				}, 1500);
			}
		}
	})
}
</script>

<style lang="scss">

.header-section {
	background: #fff;
}

.search-section {
	background: #fff;
}

.owner-section {
	background-color: #fff;

	.owner-picker {
		background-color: #fff;
		border-radius: 12rpx;

		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.owner-name {
			font-size: 32rpx;
			color: #333;
		}
		
		.tn-icon-down {
			color: #999;
			font-size: 24rpx;
		}
	}
}
.product-list-section {
	padding: 0 30rpx;
}

.product-row {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
	border: 1px solid #eaecf3;
	
	.row-main {
		margin-bottom: 20rpx;
	}
	
	.product-info {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		
		.name {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
		}
		
		.info-row {
			display: flex;
			align-items: center;
			gap: 32rpx;
		}
		
		.code {
			font-size: 26rpx;
			color: #666;
		}

		.stock {
			font-size: 26rpx;
			color: #4a90e2;
			font-weight: 500;
		}
		
		.details {
			display: flex;
			gap: 24rpx;
			font-size: 24rpx;
			color: #888;
			margin-top: 4rpx;
		}
		
		.batch-info {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #666;
			margin-top: 8rpx;
			padding-top: 12rpx;
			border-top: 1px dashed #eaecf3;
		}
	}
	
	.row-action {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		
		.input-group {
			display: flex;
			align-items: center;
			gap: 24rpx;
			flex: 1;
		}

		.input-item {
			display: flex;
			align-items: center;
			gap: 8rpx;
		}

		.input-label {
			font-size: 26rpx;
			color: #666;
			white-space: nowrap;
		}
		
		.custom-input {
			background: #f8f9fc;
			border: 1px solid #eaecf3;
			border-radius: 8rpx;
			height: 64rpx;
			padding: 0 16rpx;
			
			:deep(input) {
				font-size: 26rpx;
				color: #333;
			}
			
			&.price-input {
				width: 140rpx;
			}
			
			&.qty-input {
				width: 100rpx;
			}
		}
		
		.save-btn {
			margin-left: 20rpx;
			background: #4a90e2;
			border: none;
			border-radius: 8rpx;
			color: #fff;
			font-size: 26rpx;
			height: 64rpx;
			line-height: 64rpx;
			padding: 0 32rpx;
			
			&:active {
				background: #357abd;
			}
		}
	}
}
</style> 